<!--
 * @Author: Ming shi gang
 * @Date: 2019-08-26 16:37:43
 * @LastEditors: Ming shi gang
 * @LastEditTime: 2019-08-28 18:22:11
 -->
<template>
  <div class="red-pocket">
    <div class="back" @click="back" v-if="!isShare"></div>
    <div class="mask" v-if="mask">
      <div class="money" v-if="showMoney">
        <div class="money-top"></div>
        <div class="money-bottom">
          <img class="save-btn" src="/static/img/save_btn.png" />
          <div class="money-text">已领取{{redBagDetail.sort}}/{{redBagDetail.number}}个</div>
        </div>
        <div class="money-number">
          <span>{{redBagDetail.amount}}</span>
          <span>元</span>
        </div>
        <img class="left_gb" src="/static/img/left_gb.png" />
        <img class="right_gb" src="/static/img/right_gb.png" />
        <img class="last_gb" src="/static/img/jiao.png" />
        <img class="close" src="/static/img/close.png" @click="closeMask" />
        <!-- <div class="time">
          <div>00</div>
          <div>:</div>
          <div>29</div>
        </div>-->
      </div>
      <div class="placard" v-if="placard">
        <img :src="htmlUrl" class="ocn" />
        <img class="close" src="/static/img/close.png" @click="closeMask" />
      </div>
      <div class="read" v-if="showRead">
        <div class="top">
          <div class="left" @click="closeMask">
            <img src="/static/img/del.png" />
          </div>
          <div class="right">帮助说明</div>
        </div>
        <div class="text" v-if=" frame1">
          <div class="text-main">
            <div>个人奖金：红包奖金+购物奖金。</div>
            <div>1、购物奖金，需要淘寳订单确认收货或者确认收货超时之后，才能在个人奖金中显示。刚下单的订单无法直接显示购物奖金。</div>
            <div>2、如果淘寳订单发生退款，则对应订单的购物奖金会被扣除。</div>
            <div style="margin-top:5px">提现到账：</div>
            <div>
              1、用户可以通过微信页面或者是寻匠之美APP操作提现，注意！！！实际到账金额有区别。
              如果在微信页面操作提现，则到账金额是提现金额的30%。即：申请提现金额是10元。实际到账金额是10*0.3=3元
            </div>
            <div>2、如果在寻匠之美APP中操作提现，则到账金额跟提现金额一致。即：申请提现金额是10元。实际到账金额是10元。</div>
            <div style="margin-top:5px">提现时间：提现审批时间2个工作日</div>
            <div style="margin-top:5px">
              APP提现操作：登录寻匠之美APP 点击“我的“—“提现“
              提现审批时间2个工作日，到者支付宝账号。（您可以登录寻匠之--“我的--“提现”--添加支付宝账号）
            </div>
          </div>
        </div>
        <div class="text" v-if=" frame2">
          <div class="text-main">
            <div>1、分享人数：分享本活动至朋友圈或好友，推荐注册成功一人即算成功一次。</div>
            <div>2、周期计算：每自然周统计一次排行榜，确定中奖名单。从北京时间每周一早上10点到周日晚上20点截止。非该时间段内，则不计算为有效分享人数。</div>
            <div>3、奖品发放：奖品发放在本期活动结束后48小时内，由官方通过短消息发送领奖方式到注册手机号，或APP站内信通知到获奖用户。</div>
            <div>4、名人堂活动每周举办一次，下一期活动开始前数据将会清零，每期数据不做累计。</div>
            <div>5、本活动的最终解释权归杭州寻匠之美网络科技有限公司所有，未尽事宜可以关注官方公众号，咨询微信客服。</div>
          </div>
        </div>
        <div class="text" v-if=" frame3">
          <div class="text-main">
            <div>奖品发放在每期活动结束后48小时内，由官方通过短消息发送领奖方式到注册手机号，或APP站内消息通知到获奖用户。</div>
          </div>
        </div>
        <div class="text" v-if=" frame4">
          <div class="text-main">
            <div></div>
            <div>
              （购买教程：点击马上领取成功复制tao口令，
              打开淘寳即可购买），购买确认成功后获得奖金。
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="top-img">
      <img src="/static/img/text.png" />
    </div>
    <div class="get-activity" v-if="noStart">
      <div class="start-time">
        <span v-if="detail.packet_next">{{detail.packet_next.start_time}}</span>
      </div>
      <div class="input">
        <span>{{number}}</span>
      </div>
      <img class="ques" src="/static/img/wt.png" @click="quesion(1)" />
      <div class="money-number">
        <span>￥</span>
        <span>{{detail.amount}}</span>
      </div>
      <div class="get-money">
        <img class="wx" src="/static/img/wx.png" @click="drawClick(0)" />
        <img class="app" src="/static/img/app.png" @click="drawClick(1)" />
      </div>
    </div>
    <div class="start-activity" v-else>
      <div class="start-text">
        <div class="text">{{detail.packet.sign}}</div>
      </div>
      <div class="goods-main">
        <div class="goods">
          <img :src="detail.packet.pict_url" />
          <div class="right">{{detail.packet.title}}</div>
        </div>
      </div>
      <div
        class="input cobyOrderSn_"
        data-clipboard-action="copy"
        :data-clipboard-text="detail.packet.tpwd"
        @click="getMoneyClick(detail.packet.id,detail.packet.sign)"
      ></div>
      <img class="ques" src="/static/img/wt.png" @click="quesion(1)" />
      <div class="money-number">
        <span>￥</span>
        <span>{{detail.amount}}</span>
      </div>
      <div class="get-money_">
        <img class="wx" src="/static/img/wx.png" @click="drawClick(0)" />
        <img class="app" src="/static/img/app.png" @click="drawClick(1)" />
      </div>
    </div>
    <div class="ranking" v-if="detail.share!==undefined&&detail.share.length>0">
      <div class="ranking-top" v-if="detail.share">
        <img class="ques" src="/static/img/wt.png" @click="quesion(2)" />
        <div class="people-main">
          <div class="people-one main" v-if="detail.share[1]">
            <img
              class="head-img"
              :src="detail.share[1].head_pic==''?'/static/img/mr.png':detail.share[1].head_pic"
            />
            <img class="one" src="/static/img/one.png" />
            <div>{{detail.share[1].nickname}}</div>
          </div>
          <div class="people-two main" v-if="detail.share[0]">
            <img
              class="head-img"
              :src="detail.share[0].head_pic==''?'/static/img/mr.png':detail.share[0].head_pic"
            />
            <img class="one" src="/static/img/thire.png" />
            <div>{{detail.share[0].nickname}}</div>
          </div>
          <div class="people-three main" v-if="detail.share[2]">
            <img
              class="head-img"
              :src="detail.share[2].head_pic==''?'/static/img/mr.png':detail.share[2].head_pic"
            />
            <img class="one" src="/static/img/two.png" />
            <div>{{detail.share[2].nickname}}</div>
          </div>
        </div>
      </div>
      <div class="ranking-bottom">
        <div class="people-list" v-if="detail">
          <div class="my-item" v-if="detail.self!=''">
            <div class="left left_">
              <div class="name-main">
                <div>{{detail.self.sort}}</div>
                <div>我的</div>
              </div>
              <img v-if="detail.self.head_pic" :src="detail.self.head_pic" />
              <img v-else src="/static/img/mr.png" />
              <span>{{detail.self.nickname}}</span>
            </div>
            <div class="right">
              <span>已分享</span>
              <span>{{detail.self.child_num}}</span>
              <span>人</span>
            </div>
          </div>
          <div class="other-list" v-if="detail.share">
            <div class="other-item" v-for="(item, index) in detail.share" :key="index">
              <img class="img_" src="/static/img/other-item.png" />
              <div class="item-text">
                <div class="left">
                  <span>{{index+1}}</span>
                  <img :src="item.head_pic==''?'/static/img/mr.png':item.head_pic" />
                  <div class="nick-name">{{item.nickname}}</div>
                </div>
                <div class="right">
                  <span>已分享</span>
                  <span>{{item.child_num}}</span>
                  <span>人</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="award" v-if="detail.prize_h5!==''">
      <img class="ques" src="/static/img/wt.png" @click="quesion(3)" />
      <div class="image_tofile" ref="imageTofile">
        <div class="total">
          <img src="/static/img/positer.png" />
        </div>
        <div class="qs_code">
          <img :src="qrsCode +'?time=' + new Date().valueOf()" crossorigin="anonymous" />
        </div>
        <div class="qs_eng" v-text="spCode"></div>
      </div>
      <div class="award_share">
        <div class="product" @click="placards">生成海报</div>
        <div class="exp">点击生成海报，长按保存图片分享赢取惊喜</div>
      </div>
    </div>
    <div class="recommend">
      <img class="ques" src="/static/img/wt.png" @click="quesion(4)" />
      <div class="list">
        <div
          class="item cobyOrderSn"
          v-for="(item_, index) in detail.item"
          :key="index"
          data-clipboard-action="copy"
          :data-clipboard-text="item_.tpwd"
        >
          <div class="top">
            <img class="goods-img" v-if="item_.pict_url" :src="item_.pict_url" />
          </div>
          <div class="text">{{item_.title}}</div>
          <div class="price">
            <span>￥{{item_.coupon_price}}</span>
            <span>￥{{item_.zk_final_price}}</span>
          </div>
          <div class="btn" @click="copyLink">马上领取</div>
        </div>
      </div>
    </div>
    <div class="slogan">
      <img src="/static/img/slogan.png" />
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
import Clipboard from "clipboard";
export default {
  data() {
    return {
      redBagDetail: "", //红包信息
      app: "",
      detail: "",
      noStart: true,
      mask: false,
      showMoney: false,
      showRead: false,
      number: "", //页面显示的倒计时时间
      frame1: false,
      frame2: false,
      frame3: false,
      frame4: false,
      token: "",
      htmlUrl: "",
      qrsCode: "",
      spCode: "",
      placard: false,
      spread_code: "3Jbc4j",
      _scrollTop: null
    };
  },
  computed: {
    isShare: function() {
      return location.href.indexOf("isShare=") !== -1;
    }
  },
  created() {
    if (this.$route.query.title) {
      document.title = this.$route.query.title;
    } else {
      document.title = "整点红包";
    }

    if (this.$route.query.spread_code) {
      this.spread_code = this.$route.query.spread_code;
    }
    if (localStorage.token) {
      this.token = localStorage.getItem("token");
    } else {
      this.posters = false;
    }
    this.getDetail();
    this.getShare();
  },
  // 注册组件
  components: {
    html2canvas
  },
  methods: {
    getShare() {
      var that = this;
      var params = new URLSearchParams();
      params.append("type", 5); //你要传给后台的参数值 key/value
      this.$axios({
        url: "/v1/common/share",
        method: "post",
        data: params,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
          Authorization: "bearer " + this.token
        }
      }).then(function(res) {
        let data = JSON.stringify(res.data.data);
        if (!that.$route.query.isShare) {
          var url = window.location.href + "&isShare=true";
        } else {
          var url = window.location.href;
        }
        that.wxShare.wxShowMenu(url, data);
      });
    },
    back() {
      this.$router.go(-1);
    }, //禁止滑动
    afterOpen() {
      this._scrollTop = document.scrollingElement.scrollTop;
      document.body.style.position = "fixed";
      document.body.style.top = -this._scrollTop + "px";
    }, //取消滑动限制
    beforeClose() {
      document.body.style.position = "";
      document.body.style.top = ""; // 使 scrollTop 恢复原状
      document.scrollingElement.scrollTop = this._scrollTop;
    },
    //点击领红包
    getMoneyClick(id, sign) {
      let clipboard = new Clipboard(".cobyOrderSn_");
      clipboard.on("success", function() {});
      if (this.token) {
        this.redBage(id, sign);
      } else {
        this.$router.push({ path: "/logins?spread_code=" + this.spread_code });
      }
    },
    //领取红包
    redBage(id, sign) {
      var params = new URLSearchParams();
      params.append("packet_id", id); //你要传给后台的参数值 key/value
      params.append("sign", sign);
      this.$axios({
        url: "/v1/redPacket/getPacket",
        method: "post",
        data: params,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
          Authorization: "bearer " + this.token
        }
      }).then(res => {
        var result = res.data;
        if (result.code == 200) {
          this.redBagDetail = result.data;
          this.mask = true;
          this.showMoney = true;
          setTimeout(this.getDetail, 500);
        } else if (result.code == 10000) {
          Toast(result.msg);
          this.$router.push({
            path: "/logins?spread_code=" + this.spread_code
          });
        } else {
          Toast(result.msg);
        }
      });
    },
    //提现
    drawClick(index) {
      if (index === 0) {
        Toast("啊... 我还没有准备好，10月12号之后再找我来玩吧");
      } else {
        if (this.detail.prize_h5 !== "") {
          const u = navigator.userAgent;
          const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
          if (isiOS) {
            location.href = "https://itunes.apple.com/cn/app/id1469846769?mt=8";
          } else {
            location.href =
              "https://a.app.qq.com/o/simple.jsp?pkgname=com.example.efanshop&fromcase=40002&from=singlemessage";
          }
        } else {
          Toast("请先登录！");
          this.$router.push({
            path: "/logins?spread_code=" + this.spread_code
          });
        }
      }
    },
    //获取对应信息
    getDetail() {
      this.$axios
        .get("/v1/common/redPacketDetail", {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + this.token
          }
        })
        .then(res => {
          var result = res.data;
          if (result.code == 200) {
            this.detail = result.data;
            this.qrsCode = result.data.prize_h5.qr_code;
            this.spCode = result.data.prize_h5.spread_code;
            if (+result.data.status === 2) {
              this.noStart = true;
              if (result.data.packet_next !== "") {
                this.djs(+result.data.packet_next.countdown);
              } else {
                this.number = "敬请期待";
              }
            } else {
              this.noStart = false;
            }
          } else {
            Toast(result.msg);
          }
        });
    },
    //倒计时
    djs(countdown) {
      var that = this;
      var timer = setInterval(function() {
        if (+countdown >= 0) {
          // var minutes = Math.floor(countdown / 60);
          // var seconds = Math.floor(countdown % 60);
          that.number = that.formatSeconds(countdown);
          --countdown;
        } else {
          clearInterval(timer);
          that.getDetail();
          that.noStart = false;
        }
      }, 1000);
    },
    //将秒转成时间
    formatSeconds(value) {
      var theTime = parseInt(value); // 秒
      var theTime1 = 0; // 分
      var theTime2 = 0; // 小时
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
        }
      }
      if (parseInt(theTime) > 9) {
        var result = "" + parseInt(theTime);
      } else {
        var result = "0" + parseInt(theTime);
      }
      if (theTime1 > 9) {
        result = "" + parseInt(theTime1) + ":" + result;
      } else {
        result = "0" + parseInt(theTime1) + ":" + result;
      }
      if (theTime2 > 9) {
        result = "" + parseInt(theTime2) + ":" + result;
      } else {
        result = "0" + parseInt(theTime2) + ":" + result;
      }
      return result;
    },
    //点击复制
    copyLink() {
      let _this = this;
      if (this.detail.prize_h5 !== "") {
        let clipboard = new Clipboard(".cobyOrderSn");
        clipboard.on("success", function() {
          Toast("复制成功,请在淘寳中粘贴口令");
        });
        clipboard.on("error", function() {
          _this.$toast("复制失败");
        });
      } else {
        MessageBox({
          title: "提示",
          message: "您还没有登录，是否登录",
          showCancelButton: true
        }).then(action => {
          if (action == "confirm") {
            this.$router.push({
              path: "/logins?spread_code=" + this.spread_code
            });
          }
        });
      }
    },
    //弹出问题提示
    quesion(index) {
      this.mask = true;
      this.showRead = true;
      this.afterOpen();
      if (index === 1) {
        this.frame1 = true;
        this.frame2 = false;
        this.frame3 = false;
        this.frame4 = false;
      }
      if (index === 2) {
        this.frame1 = false;
        this.frame2 = true;
        this.frame3 = false;
        this.frame4 = false;
      }
      if (index === 3) {
        this.frame1 = false;
        this.frame2 = false;
        this.frame3 = true;
        this.frame4 = false;
      }
      if (index === 4) {
        this.frame1 = false;
        this.frame2 = false;
        this.frame3 = false;
        this.frame4 = true;
      }
    },
    //关闭弹框
    closeMask() {
      this.beforeClose();
      this.showMoney = false;
      this.showRead = false;
      this.mask = false;
      this.placard = false;
    },
    placards() {
      this.placard = true;
      this.mask = true;
    },
    //生成海报
    toImage() {
      if (this.detail.prize_h5 !== "") {
        html2canvas(this.$refs.imageTofile, {
          backgroundColor: null,
          useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        }).then(canvas => {
          let url = canvas.toDataURL("image/png");
          this.htmlUrl = url;
          // 把生成的base64位图片上传到服务器,生成在线图片地址
        });
      }
    }
  },
  mounted() {
    setTimeout(this.toImage, 500);
    // 如果页面一加载就需要生成图片,就在mounted里调用方法,给一个setTimeout,保证页面元素已存在
  }
};
</script>
<style scoped lang="less">
.red-pocket {
  width: 100%;
  min-height: 100vh;
  background: rgba(51, 51, 51, 1);
  .mask {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(51, 51, 52, 0.5);
    .money {
      position: fixed;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 640px;
      height: 708px;
      background: #fdf8f0;
      border-radius: 20px;
      .money-top {
        width: 100%;
        height: 434px;
        background: url("/static/img/money_bac_.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .money-bottom {
        width: 100%;
        height: 274px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        .save-btn {
          width: 460px;
          height: 96px;
          // margin-top: 36px;
        }
        .money-text {
          width: 546px;
          word-break: break-all;
          color: #eb600c;
          font-size: 24px;
          text-align: center;
          margin-top: 20px;
        }
      }
      .money-number {
        width: 100%;
        position: absolute;
        top: 235px;
        // left: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          &:nth-child(1) {
            font-size: 68px;
            color: #f7211e;
          }
          &:nth-child(2) {
            font-size: 42px;
            color: #f7211e;
            margin-left: 14px;
          }
        }
      }
      .left_gb {
        width: 40px;
        height: 30px;
        position: absolute;
        top: 210px;
        left: 0;
      }
      .right_gb {
        width: 56px;
        height: 44px;
        position: absolute;
        top: 320px;
        right: 0;
      }
      .last_gb {
        width: 164px;
        height: 164px;
        position: absolute;
        bottom: -62px;
        left: -62px;
      }
      .time {
        position: absolute;
        top: 16px;
        right: 60px;
        display: flex;
        div {
          font-size: 28px;
          &:nth-child(1) {
            width: 46px;
            height: 46px;
            background: rgba(138, 187, 213, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fdf8f0;
          }
          &:nth-child(2) {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #8abbd5;
            margin: 0 12px;
          }
          &:nth-child(3) {
            width: 46px;
            height: 46px;
            background: rgba(138, 187, 213, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fdf8f0;
          }
        }
      }
      .close {
        width: 74px;
        height: 74px;
        position: absolute;
        bottom: -102px;
        left: 280px;
      }
    }
    .read {
      position: fixed;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 640px;
      height: 700px;
      background: rgba(255, 255, 255, 1);
      border-radius: 10px;
      .top {
        display: flex;
        width: 100%;
        align-items: center;
        height: 100px;
        padding: 0 32px;
        box-sizing: border-box;
        border-bottom: solid 1px #f2f2f2;
        position: fixed;
        .left {
          margin-right: 190px;
          img {
            width: 34px;
            height: 34px;
          }
        }
        .right {
          font-size: 32px;
          color: #333334;
          //   position: absolute;
          //   margin: auto;
        }
      }
      .text {
        width: 100%;
        height: 600px;
        padding: 24px 32px 0 32px;
        box-sizing: border-box;
        margin-top: 100px;
        overflow: auto;
        .text-main {
          word-break: break-all;
          font-size: 28px;
          color: rgba(51, 51, 52, 1);
          line-height: 40px;
          padding-bottom: 20px;
          box-sizing: border-box;
        }
        .text-bottom {
          margin-top: 30px;
        }
      }
    }
  }
  .top-img {
    // font-size: 80px;
    // color: rgba(255, 254, 222, 1);
    img {
      width: 100%;
    }
  }
  .get-activity {
    position: relative;
    width: 100%;
    height: 1050px;
    background: url("/static/img/hb.png") no-repeat center center;
    background-size: 100% 100%;
    // display: flex;
    // justify-content: center;
    // img {
    //   width: 100%;
    // }
    .start-time {
      width: 100%;
      font-size: 48px;
      color: rgba(255, 254, 222, 1);
      position: absolute;
      text-align: center;
      top: 200px;
    }
    .input {
      width: 160px;
      height: 160px;
      background: url("/static/img/ty.png") no-repeat center center;
      background-size: 100% 100%;
      // margin: 300px auto 0;
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 280px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-size: 28px;
      // .input_ {
      //   width: 100%;
      //   height: 80px;
      //   border-radius: 20px;
      //   border: 0;
      //   outline: none;
      //   text-align: center;
      // }
    }
    .ques {
      width: 45px;
      height: 45px;
      position: absolute;
      right: 72px;
      bottom: 290px;
    }
    .money-number {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 145px;
      span {
        &:nth-child(1) {
          color: #e13d39;
          font-size: 60px;
        }
        &:nth-child(2) {
          color: #e13d39;
          font-size: 100px;
        }
      }
    }
    .get-money {
      width: 100%;
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 40px;
      align-items: center;
      .wx {
        margin-right: 74px;
        width: 216px;
        height: 73px;
      }
      .app {
        // margin-right: 74px;
        width: 233px;
        height: 91px;
      }
    }
  }
  .start-activity {
    position: relative;
    width: 100%;
    height: 1200px;
    background: url("/static/img/kq.png") no-repeat center center;
    background-size: 100% 100%;
    // display: flex;
    // justify-content: center;
    // img {
    //   width: 100%;
    // }
    .start-text {
      width: 100%;
      position: absolute;
      display: flex;
      justify-content: center;
      top: 80px;
      .text {
        width: 240px;
        word-break: break-all;
        font-size: 24px;
        color: #333333;
      }
    }
    .goods-main {
      width: 100%;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 260px;
      .goods {
        width: 320px;
        display: flex;
        align-items: center;
        img {
          width: 76px;
          height: 76px;
        }
        .right {
          width: 220px;
          //height: 128px;
          word-break: break-all;
          margin-left: 12px;
          font-size: 22px;
          color: #333333;
          overflow: hidden;
          // text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-box-orient: vertical !important;
          // -webkit-line-clamp: 2;
        }
      }
    }
    .input {
      width: 135px;
      height: 135px;
      background: url("/static/img/lq.png") no-repeat center center;
      background-size: 100% 100%;
      // margin: 300px auto 0;
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 420px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-size: 28px;
      // .input_ {
      //   width: 100%;
      //   height: 80px;
      //   border-radius: 20px;
      //   border: 0;
      //   outline: none;
      //   text-align: center;
      // }
    }
    .ques {
      width: 45px;
      height: 45px;
      position: absolute;
      right: 72px;
      bottom: 335px;
    }
    .money-number {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 180px;
      span {
        &:nth-child(1) {
          color: #e13d39;
          font-size: 60px;
        }
        &:nth-child(2) {
          color: #e13d39;
          font-size: 100px;
        }
      }
    }
    .get-money_ {
      width: 100%;
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 60px;
      align-items: center;
      .wx {
        margin-right: 74px;
        width: 216px;
        height: 73px;
      }
      .app {
        // margin-right: 74px;
        width: 233px;
        height: 91px;
      }
    }
  }
  .ranking {
    width: 100%;
    // height: 1300px;
    // background: url("/static/img/phb_2.png") no-repeat center center;
    // background-size: 100% 100%;
    .ranking-top {
      position: relative;
      width: 100%;
      height: 615px;
      background: url("/static/img/phb_top.png") no-repeat center center;
      background-size: 100% 100%;
      .ques {
        width: 45px;
        height: 45px;
        position: absolute;
        right: 72px;
        top: 65px;
      }
      .people-main {
        width: 100%;
        display: flex;
        position: relative;
        top: 168px;

        .people-one {
          right: 20px;
          top: 70px;
          left: 242px;
        }
        .people-three {
          left: 30px;
          top: 70px;
          left: 462px;
        }
        .people-two {
          top: 30px;
          left: 342px;
        }

        .main {
          width: 80px;
          height: 80px;
          border: 1px solid rgba(245, 215, 171, 1);
          border-radius: 50%;
          position: absolute;
          box-sizing: border-box;
          // background: black;
          .head-img {
            width: 80px;
            height: 80px;
            border: 1px solid rgba(245, 215, 171, 1);
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
          }
          .one {
            width: 56px;
            height: 36px;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: -36px;
          }
          > div {
            width: 100px;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: -40px;
            text-align: center;
            color: #ffffff;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .ranking-bottom {
      width: 100%;
      height: auto;
      background: url("/static/img/phb_bottom.png") no-repeat center center;
      background-size: 100% 100%;
      padding-bottom: 40px;
      // position: relative;
      // top: 20px;
      .people-list {
        width: 100%;
        // height: 100px;
        padding: 0 20px;
        // position: absolute;
        // top: 520px;
        box-sizing: border-box;
        // background: black;
        .my-item {
          width: 100%;
          height: 90px;
          background: url("/static/img/my_item.png") no-repeat center center;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 80px;
          box-sizing: border-box;
          .left {
            display: flex;
            align-items: center;
            .name-main {
              display: flex;
              flex-direction: column;
              justify-content: center;
              > div {
                color: #333333;
                &:nth-child(1) {
                  font-size: 24px;
                }
                &:nth-child(2) {
                  font-size: 22px;
                }
              }
            }
            span {
              color: white;
              font-size: 30px;
            }
            img {
              width: 52px;
              height: 52px;
              background: rgba(255, 255, 255, 1);
              border: 1px solid rgba(51, 51, 51, 1);
              border-radius: 50%;
              margin: 0 28px 0 5px;
            }
          }
          .right {
            // display: flex;
            // align-items: center;
            span {
              &:nth-child(1) {
                color: #333333;
                font-size: 22px;
              }
              &:nth-child(2) {
                color: #ffffff;
                font-size: 24px;
                margin: 0 20px;
              }
              &:nth-child(3) {
                color: #333333;
                font-size: 22px;
              }
            }
          }
          // img {
          //   width: 100%;
          //   height: 100%;
          // }
        }
        .other-list {
          padding: 0 32px;
          // margin-top: 16px;
          .other-item {
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 48px;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 10px;
            &:last-child {
              margin-bottom: 0;
            }
            // background: url("/static/img/other_item.png") no-repeat center
            //   center;
            // background-size: 100% 100%;
            .img_ {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              right: 0;
            }
            .item-text {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              right: 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 48px;
              box-sizing: border-box;
              .left_ {
                position: relative !important;
                right: 15px !important;
              }
              .left {
                display: flex;
                align-items: center;
                span {
                  color: white;
                  font-size: 30px;
                }
                .nick-name {
                  color: #ffffff;
                  font-size: 22px;
                  width: 200px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                img {
                  width: 52px;
                  height: 52px;
                  background: rgba(255, 255, 255, 1);
                  border: 1px solid rgba(51, 51, 51, 1);
                  border-radius: 50%;
                  margin: 0 28px;
                }
              }
              .right {
                // display: flex;
                // align-items: center;
                span {
                  &:nth-child(1) {
                    color: #333333;
                    font-size: 22px;
                  }
                  &:nth-child(2) {
                    color: #ffffff;
                    font-size: 24px;
                    margin: 0 20px;
                  }
                  &:nth-child(3) {
                    color: #333333;
                    font-size: 22px;
                  }
                }
              }
            }
          }
        }
      }
    }
    // .three {
    //   width: 100%;
    //   display: flex;
    //   justify-content: center;
    //   position: absolute;
    //   top: 370px;
    //   img {
    //     width: 450px;
    //     height: 128px;
    //   }
    // }
  }
  .recommend {
    position: relative;
    width: 100%;
    height: 580px;
    background: url("/static/img/sptj.png") no-repeat center center;
    background-size: 100% 100%;
    .ques {
      width: 45px;
      height: 45px;
      position: absolute;
      right: 72px;
      top: 65px;
    }
    .list {
      width: 100%;
      position: absolute;
      padding: 0 80px;
      display: flex;
      justify-content: flex-start;
      bottom: 64px;
      box-sizing: border-box;
      .item {
        width: 185px;
        // height: 370px;
        background: rgba(255, 255, 255, 1);
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        padding-bottom: 16px;
        box-sizing: border-box;
        margin-right: 34px;
        &:last-child {
          margin-right: 0 !important;
        }
        .top {
          width: 100%;
          height: 186px;
          .goods-img {
            width: 100%;
            height: 100%;
            border-radius: 14px 14px 0 0;
          }
        }
        .text {
          font-size: 22px;
          color: #333333;
          word-break: break-all;
          line-height: 33px;
          height: 66px;
          margin-top: 10px;
          padding: 0 10px;
          box-sizing: border-box;
          width: 100%;
          // height: 60px;
          overflow: hidden;
          position: relative;
          // text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-box-orient: vertical !important;
          // -webkit-line-clamp: 2;
        }
        .text::after {
          content: "...";
          position: absolute;
          bottom: 0;
          right: 0;
          padding-left: 20px;
        }
        .price {
          margin-top: 10px;
          padding: 0 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          span {
            &:nth-child(1) {
              font-size: 22px;
              color: #e13d39;
            }
            &:nth-child(2) {
              font-size: 18px;
              color: #717171;
              text-decoration: line-through;
            }
          }
        }
        .btn {
          width: 130px;
          height: 40px;
          border: solid 1px #e13d39; /* no */
          border-radius: 10px;
          margin: 10px auto 0;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 22px;
          color: #e13d39;
        }
      }
    }
  }
  .slogan {
    width: 100%;
    height: 78px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.award {
  position: relative;
  width: 100%;
  height: 996px;
  background: url("/static/img/hdjp.png") no-repeat center center;
  background-size: 100% 100%;
  .ques {
    width: 45px;
    height: 45px;
    position: absolute;
    right: 72px;
    top: 65px;
  }
  .share-gift {
    width: 485px;
    height: 700px;
    background: #333333;
    position: absolute;
    margin: auto;
    top: 150px;
    left: 130px;
    .share_img {
      width: 100%;
      height: 100%;
    }
  }
  // .share-main {
  //   width: 100%;
  //   display: flex;
  //   justify-content: center;
  //   position: absolute;
  //   margin: auto;
  //   bottom: 48px;
  //   .btn {
  //     width: 500px;
  //     height: 77px;
  //   }
  // }
}

.image_tofile {
  width: 487px;
  height: 703px;
  margin: 0 auto;
  position: absolute;
  z-index: 1;
  top: 156px;
  left: 0;
  right: 0;
  margin: auto;
}
.total {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.total img {
  width: 100%;
}
.qs_code {
  width: 88px;
  height: 88px;
  position: absolute;
  top: 368px;
  left: 200px;
}
.qs_code img {
  width: 100%;
}
.qs_eng {
  font-size: 16px;
  color: #ffe416;
  width: 52px;
  position: absolute;
  top: 480px;
  left: 236px;
}
.f-full {
  width: 680px;
}
.ocn {
  width: 100%;
  height: 703px;
  position: absolute;
  top: 0;
  left: 0;
}
.award .award_share {
  color: #f4dbb5;
  font-size: 28px;
  text-align: center;
  position: absolute;
  top: 880px;
  left: 0;
  right: 0;
}
.award_share .product {
  width: 180px;
  height: 48px;
  line-height: 48px;
  margin: 0 auto;
  margin-bottom: 8px;
  border-radius: 16px;
  background: #393939;
  color: #f4dbb5;
}
.placard {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 487px;
  z-index: 55;
  height: 800px;
  margin: auto;
}
.placard .close {
  width: 74px;
  height: 74px;
  position: absolute;
  bottom: 12px;
  left: 0px;
  right: 0;
  margin: 0 auto;
}
.back {
  width: 60px;
  height: 60px;
  background: #fff url("/static/img/go_back.png") no-repeat 4px center;
  background-size: 46px 46px;
  position: absolute;
  top: 28px;
  left: 18px;
  border-radius: 50%;
  opacity: 0.3;
}
</style>